<template>
<div class="p-6">
   <!-- 标题 -->
    <div class="text-2xl font-bold mb-6 border-b pb-2 text-gray-700">
      管理员编辑
    </div>
    <el-row>
      <el-col :span="12">
        <el-form  :model="fromSubmit" label-width="80px">
          <el-form-item label="头像">
            <upload v-model:modelValue="fromSubmit.avatar"  :limit="1" :multiple="false"></upload />
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="fromSubmit.nickname" placeholder="请输入昵称" ></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="fromSubmit.account" placeholder="请输入账号" disabled></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="fromSubmit.newPassword" placeholder="请输入新密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="fromSubmit.confirmPassword" placeholder="请输入确认密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="">
          <el-button type="primary" @click="handleSubmit">保存</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>
</div>
</template>

<script setup lang="ts">
import upload from '@/components/image-upload/index.vue';
import { ref } from 'vue';
import { useUserStore } from '@/store/auth'
import{editCurrentAdminApi} from '@/api/auth'
import { ElMessage } from 'element-plus';
import router from '@/router';
const userStore = useUserStore()
const fromSubmit = ref<any>({
  avatar:'',
  account:'',
  nickname:'',
  newPassword:'',
  confirmPassword:'',
});

const getUserInfo = async () => {
  //循环formSubmit
  for (const key in fromSubmit.value) {
    if (Object.hasOwnProperty.call(userStore.userInfo, key)) {
      fromSubmit.value[key] = userStore.userInfo[key]
    }
  }

};

const handleSubmit = async () => {
  const res:any = await editCurrentAdminApi(fromSubmit.value)
  ElMessage.success(res.message)
  //退出登录
  userStore.logout()
  router.push('/login')
};
getUserInfo()
</script>
